<template>
<section id="aside">
    <div class="combat">
        <h3 class="title">
            漏洞靶场实战-本地文件包含
        </h3>
        <img src="@/assets/images/combat.png" alt="" class="bgc-combat">
        <div class="illustrate">
            <h3>本地文件包含漏洞演习</h3>
           <p>难度：初级</p>
           <p>学习人数：317</p>
           <p>标签：本地文件包含</p>
        </div>
    </div>
   
        <Rankings class="rank-lay"></Rankings>
    
   
</section>
</template>

<script setup lang=ts>
import Rankings from './Rankings.vue';
</script>

<style scoped lang=scss>
#aside {
    width: 5.5rem;
    height: 19.7125rem;
    border: 0.025rem solid #E5E5E5;
}
.title {
    width: 5.05rem;
    padding: 0.1125rem 0;
    font-size: 0.4rem;
    color: #1A1A1A;
    margin: 0 auto;
    font-weight: 500;
    line-height: 0.5625rem;
}
.bgc-combat {
    width: 100%;
    height: 3.6375rem;
    border: none;
}
.illustrate {
    margin-top: 0.3625rem;
    padding-left: 0.5rem;
    h3 {
        font-size: 0.25rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 0.35rem;
        margin-bottom: 0.5rem;
    }
    p {
    font-size: 0.25rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 0.35rem;
    margin-bottom: 0.375rem;
    }
}
.rank-lay {
    margin: 0 auto;
}
</style>